<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>心理测评</el-breadcrumb-item>
    <el-breadcrumb-item>测评结果管理</el-breadcrumb-item>
  </el-breadcrumb>

  <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
    <el-form-item label="用户ID">
      <el-input v-model="queryInfo.userId" placeholder="请输入用户ID" clearable @clear="queryDataList" />
    </el-form-item>
    <el-form-item label="测评ID">
      <el-input v-model="queryInfo.testProblemId" placeholder="请输入心理测评ID" clearable @clear="queryDataList" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="queryDataList">搜索</el-button>
      <el-button type="danger" @click="batchRemove">批量删除</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="dataList" border row-key="id" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" fixed="left" width="40" />
    <el-table-column property="id" label="ID" fixed="left" />
    <el-table-column property="score" label="分值" />
    <el-table-column property="resultContent" label="结论内容" />
    <el-table-column property="testProblemId" label="心理测评ID" />
    <el-table-column property="userId" label="用户ID" />
    <el-table-column property="testTime" label="测评时间">
      <template #default="scope">
        {{ scope.row.testTime }}
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" min-width="120">
      <template #default="scope">
        <el-button type="primary" size="small" @click="check(scope.row)">查看</el-button>
        <el-button type="danger" size="small" @click="remove(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination v-model:current-page="queryInfo.pageNum" v-model:page-size="queryInfo.pageSize"
                 :page-sizes="[5, 10, 15, 20]" size="default" layout="total, sizes, prev, pager, next, jumper" :total="total"
                 @size-change="handleSizeChange" @current-change="handleCurrentChange" />

  <!-- 查看详情对话框 -->
  <el-dialog :title="title" v-model="dialogFormVisible" width="600">
    <el-form :model="resultData" label-width="100">
      <el-form-item label="ID">
        <el-input v-model="resultData.id" autocomplete="off" readonly></el-input>
      </el-form-item>
      <el-form-item label="分值">
        <el-input v-model="resultData.score" autocomplete="off" readonly></el-input>
      </el-form-item>
      <el-form-item label="结论内容">
        <el-input type="textarea" v-model="resultData.resultContent" autocomplete="off" readonly></el-input>
      </el-form-item>
      <el-form-item label="心理测评ID">
        <el-input v-model="resultData.testProblemId" autocomplete="off" readonly></el-input>
      </el-form-item>
      <el-form-item label="用户ID">
        <el-input v-model="resultData.userId" autocomplete="off" readonly></el-input>
      </el-form-item>
      <el-form-item label="测评时间">
        <el-input v-model="resultData.testTime" autocomplete="off" readonly></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancle">
          关闭
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus';
import { getCurrentInstance, onMounted, reactive, ref } from 'vue';

const queryInfo = reactive({
  userId: '',
  testProblemId: '',
  pageNum: 1,
  pageSize: 5,
});

// 总数据量
const total = ref(0);

const axios = getCurrentInstance()?.appContext.config.globalProperties.axios;

const queryDataList = () => {
  axios.get('testResult/page', { // 假设后端接口为 test-result/page，需根据实际调整
    params: queryInfo,
  }).then((resp) => {
    if ("resp.code === 200") {
      dataList.value = resp.list;
      total.value = resp.total;
    } else {
      ElMessage.error('数据查询失败');
    }
  });
};

onMounted(() => {
  queryDataList();
});

const dataList = ref([]);

const multipleSelection = ref([]);
const handleSelectionChange = (val : any[]) => {
  multipleSelection.value = val.map((item) => item.id);
  console.log(multipleSelection.value);
};

// 动态标题
const title = ref('查看测评结果详情');
// 控制对话框是否显示
const dialogFormVisible = ref(false);
// 查看结果数据集
const resultData = ref({
  id: '',
  score: '',
  resultContent: '',
  testProblemId: '',
  userId: '',
  testTime: '',
});

const check = (row) => {
  title.value = '查看测评结果详情';
  dialogFormVisible.value = true;
  resultData.value = row;
};

const handleSizeChange = () => {
  queryDataList();
};
const handleCurrentChange = () => {
  queryDataList();
};

const cancle = () => {
  resultData.value = {
    id: '',
    score: '',
    resultContent: '',
    testProblemId: '',
    userId: '',
    testTime: '',
  };
  dialogFormVisible.value = false;
};

const remove = (id) => {
  ElMessageBox.confirm(
      '此操作将永久删除该数据, 是否继续?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    axios.delete(`testResult/${id}`,{
      params: { id: id } // 明确传递名为"id"的请求参数
    }) // 假设删除接口为 test-result/{id}，需根据实际调整
        .then((resp) => {
          if ("resp.code === 200") {
            ElMessage.success('删除成功');
          } else {
            ElMessage.error('删除失败');
          }
          queryDataList();
        });
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消删除',
    });
  });
};

const batchRemove = () => {
  ElMessageBox.confirm(
      '此操作将永久删除选中数据, 是否继续?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    axios.delete('testResult/', { // 假设批量删除接口为 test-result/batch，需根据实际调整
      params: {
        ids: multipleSelection.value.join(','),
      },
    }).then((resp) => {
      if ("resp.code === 200") {
        ElMessage.success('批量删除成功');
      } else {
        ElMessage.error('批量删除失败');
      }
      queryDataList();
    });
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消删除',
    });
  });
};
</script>

<style scoped>
.el-breadcrumb {
  border-bottom: 1px solid #EEEEEE;
  padding-bottom: 20px;
}

.demo-form-inline .el-input {
  --el-input-width: 180px;
}

.demo-form-inline {
  padding: 10px 0;
}

.el-pagination {
  margin-top: 15px;
}
</style>